<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>博客文章</title>

    <link rel="stylesheet" th:href="@{/my/css/reset.css}" >
    <link rel="stylesheet" th:href="@{/my/css/fragment.css}">
    <link rel="stylesheet" th:href="@{/my/css/article.css}">
    <link rel="stylesheet" th:href="@{/fontawesome-free-5/css/all.min.css}">
    <link rel="stylesheet" th:href="@{/editor-md/css/editormd.css}">
    <link rel="stylesheet" th:href="@{/element-ui/css/element-ui.css}">

</head>
<body>

<div id="app">

    <link rel="stylesheet" v-if="theme === 'dark' " th:href="@{/my/css/theme/dark.css}">
    <link rel="stylesheet" v-if="theme == 'light' " th:href="@{/my/css/theme/light.css}">

    <nav class="nav_bg">
        <div class="left">
            <a th:href="@{/}">首页</a>
            <a th:href="@{/news}">新闻</a>
            <a th:href="@{/time}">时间线</a>
            <a th:href="@{/about}">关于我</a>
        </div>
        <div class="right">
            <img v-show="theme === 'light' " @click="setTheme('dark')"  th:src="@{/my/img/nav/light.svg}" alt="" src="">
            <img v-show="theme === 'dark' "  @click="setTheme('light')" th:src="@{/my/img/nav/dark.svg}" alt="" src="">
            <a v-show="token === 'No'"  @click="dialogLogin = true">登录</a>
            <div v-show="token === 'Yes'">
                <el-dropdown>
                  <span class="el-dropdown-link">
                    胖头鱼<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="inAdmin" >进入首页</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </nav>

    <header>
        <!-- 动态轮播图 -->
        <div  class="dynanic_shuffl" >
            <img  :src="art.url" alt="">
        </div>
        <div class="title">
            <h1>{{ art.title }}</h1>
            <p>{{ art.abstracter }}</p>
        </div>
    </header>

    <main>
        <div class="main">
            <div>
                <div class="article">
                    <div class="title">
                        <h2>{{ art.title }}</h2>
                        <p>
                            <span>发布时间: <i>{{ art.createDate }}</i></span>
                            <span>作者: <i>胖头鱼</i></span>
                            <span>来源: <i>胖头鱼的个人博客</i></span>
                        </p>
                        <div>
                            <i title="文章标签" class="fas fa-tags"></i>
                            <i v-for="item in art.tags">{{ item.tag }}</i>
                        </div>
                    </div>
                    <div class="content" id="art_content" >
                        <label>
                            <textarea style="display: none;">{{ art.content }}</textarea>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <div class="left">
            <p class="thank">Thank For</p>
            <p class="site_info">
                <span><img th:src="@{/my/img/footer/tencent.png}" src="" alt="">腾讯云服务器</span>
                <span><img th:src="@{/my/img/footer/tencent.png}" src="" alt="">腾讯云SSL证书</span>
                <span><img th:src="@{/my/img/footer/qiniu.png}" src="" alt="">七牛云存储</span>
            </p>
            <p class="version">
                <span>version</span>
                <span>4.0.0</span>
            </p>
            <p>建站日期: 2021-12-29</p>
            <p class="badges">
                <a th:href="@{https://beian.miit.gov.cn}" style="color: var(--footer_color)"><img th:src="@{/my/img/footer/badges.png}" alt="" src="">备案号</a>
            </p>
        </div>
        <div class="right">
            <div class="contact">
                <div>
                    <img class="svg" th:src="@{/my/img/footer/qq_icon.svg}" src="" alt="">
                    <img class="qq" th:src="@{/my/img/footer/qq.png}" src="" alt="">
                </div>
                <div>
                    <img class="svg" th:src="@{/my/img/footer/wexin_icon.svg}" src="" alt="">
                    <img class="qq" th:src="@{/my/img/footer/wechat.png}" src="" alt="">
                </div>

                <div>
                    <a><img class="svg" th:src="@{/my/img/footer/bilibili_icon.svg}" src="" alt=""></a>
                </div>
                <div>
                    <a><img class="svg" th:src="@{/my/img/footer/gitee_icon.svg}" src="" alt=""></a>
                </div>
                <div>
                    <a><img class="svg" th:src="@{/my/img/footer/github_icon.svg}" src="" alt=""></a>
                </div>

            </div>
            <p>
                联系邮箱: 1554696146@qq.com
            </p>
        </div>
    </footer>

    <div class="dialog_box">
        <el-dialog title="管理员登录" :visible.sync="dialogLogin">
            <div class="top">
                <p>Username : </p>
                <el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
                <p>Password : </p>
                <el-input placeholder="请输入密码" v-model="loginForm.password" show-password></el-input>
            </div>

            <div class="bottom">
                <el-button type="success" @click="login">登录</el-button>
            </div>

        </el-dialog>
    </div>
</div>

<script th:src="@{/vue/vue.js}"></script>
<script th:src="@{/axios/axios.min.js}"></script>
<script th:src="@{/element-ui/js/element-ui.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var article = [[${art}]];
</script>
<script>
    new Vue({
        el: '#app',
        data: {
            theme: 'light',
            dialogLogin: false,
            token: 'No',
            urls: [
                'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
            ],
            loginForm: {
                username: '',
                password: ''
            },
// ------------------------------------------
            tags: ['HTML', 'CSS'],
            art: {
                title: 'BIAOTI',
                abstracter: '简介简介简介',
                url: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
                createDate: "2020-12-12 12:23:12",
                content: '## 二级标题',
                tags: [
                    {
                        tag: 'JAVA',
                    },
                    {
                        tag: 'HTML'
                    }
                ],
            }
        },
        methods: {
            // 获取主题
            setTheme(themeName) {
                this.theme = themeName;
                localStorage.setItem('theme', themeName);
            },
            // 初始化主题
            init_theme() {
                let theme = localStorage.getItem('theme');
                if ( theme) {
                    this.theme = theme;
                }
            },
            // 初始化 token
            init_Token() {
                let token = localStorage.getItem('token');
                if ( token ) {
                    this.token = token;
                }
            },
            // 登录
            login() {
                axios.post("/login", this.loginForm).then(res => {
                    console.log(res.data);
                    if ( res.data.code === 200) {
                        this.$message.success(res.data.msg);
                        localStorage.setItem("token", "Yes");
                        setTimeout(() => {
                            this.dialogLogin = false;
                        }, 500);
                    } else {
                        this.$message.warning(res.data.msg);
                    }
                })
            },
            // 进入首页
            inAdmin() {
                setTimeout(() => {
                    location.href = "/admin/";
                }, 200)
            },
            init_art() {
                this.art = article;
            }
        },
        created() {
            this.init_theme();
            this.init_Token();
            this.init_art();
        },
    })
</script>
<!-- md 编辑器的配置 -->
<script th:src="@{/jquery/jquery.min.js}"></script>
<script th:src="@{/editor-md/lib/marked.min.js}"></script>
<script th:src="@{/editor-md/lib/prettify.min.js}"></script>
<script th:src="@{/editor-md/editormd.js}"></script>
<script>
    $(function () {
        let editor = editormd.markdownToHTML("art_content", {
            width: "100%",
            height: "100%",
            path: "/editor-md/lib/",
        });
    })
</script>

<!--监听滚动事件-->
<script>

    let nav = document.querySelector('.nav_bg');
    window.onscroll = function () {
        let top = document.documentElement.scrollTop;
        if ( top >= 200) {
            nav.classList.add('show');
        } else {
            nav.classList.remove('show');
        }
    }
</script>

</body>
</html>